import {Col, Row, Card} from 'antd';
import User from './components/user'
import List from './components/list'
import Echarts from "../../components/Echarts";
import {countData} from './columns'
import './index.css'
import {getData} from "../../api";
import {useEffect, useState} from "react";

const Home = () => {
    const [echartData, setLineEcharts] = useState({})
    useEffect(() => {
        getData().then(({data}) => {
            const {orderData, userData, videoData} = data.data;
            const order = orderData
            const xData = order.date
            const keyArray = Object.keys(order.data[0]);
            const series: any[] = []
            keyArray.forEach(key => {
                series.push({
                    name: key,
                    data: order.data.map(item => item[key]),
                    type: "line"
                })
            })
            setLineEcharts({
                order: {
                    xData,
                    series
                },
                user: {
                    xData: userData.map((v: any) => v.date),
                    series: [
                        {
                            name: '新增用户',
                            data: userData.map((v: any) => v.new),
                            type: 'bar',
                        },
                        {
                            name: '活跃用户',
                            data: userData.map((v: any) => v.active),
                            type: 'bar',
                        }
                    ]
                },
                pieData: {
                    series: [
                        {
                            data: videoData,
                            type: 'pie',
                        }

                    ]
                }
            })
        })
    }, [])
    return (
        <div style={{width: '100%', paddingLeft: '10px', paddingRight: '10px'}}>
            <div style={{display: 'flex'}}>
                <div>
                    <User/>
                    <List/>
                </div>
                <div>
                    <div style={{display: 'flex', alignItems: 'center', width: '100%', flexWrap: 'wrap'}}>
                        {
                            countData.map((v: any, index: number) => {
                                return (<Card style={{backgroundColor: v.color}}
                                              className={index > 2 ? 'cardName card-content' : 'card-content'}
                                              key={index}>
                                    <div style={{display: 'flex', justifyContent: 'space-around'}}>
                                        <div style={{fontSize: '30px'}}>{v.icon}</div>
                                        <div>
                                            <div style={{
                                                fontSize: '20px',
                                                color: 'white',
                                                fontWeight: 'bold'
                                            }}>  {v.value}</div>
                                            <div>{v.name}</div>
                                        </div>
                                    </div>
                                </Card>)
                            })
                        }
                    </div>
                    <Row>
                        <Col span={24}>
                            {echartData.order &&
                                <Echarts style={{width: '100%', height: '310px'}} chartData={echartData.order}/>}
                        </Col>
                    </Row>
                    <div style={{display: 'flex'}}>
                        {echartData.user && <Echarts style={{width: '100%', height: '230px'}} chartData={echartData.user}/>}
                        {echartData.pieData && <Echarts style={{marginTop:'-20px',  width: '100%', height: '230px',}} isAxisChart={false} chartData={echartData.pieData}/>}
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Home
